<!-- 我的粉丝 -->
<template>
    <view class="page" :style="{ '--color': color }">
        <!-- #ifdef MP-WEIXIN -->
        <navBar :bgMake="5" :Color="2" title="我的达人"></navBar>
        <!-- #endif -->

        <view class="tabs" v-if="commission.length">
            <u-tabs :list="list1" :scrollable="false" :lineColor="color" :current="current" :activeStyle="{ color: color }" @click="tabClick"></u-tabs>
        </view>

        <view class="type2" v-if="commission[current] && commission[current].length > 0">
            <view class="item d-flex" v-for="(item, index) in commission[current]" :key="index">
                <image class="friHead" @error="item.v_headimg = ''" :src="item.v_headimg ? item.v_headimg : staticUrl + '/images/jh_up/head.jpg'" mode="aspectFill"></image>
                <view class="d-flex f-column j-sb">
                    <view>
                        <text class="name">{{ item.v_name }}</text>
                        <text class="id">（{{ item.v_tel }}）</text>
                    </view>
                    <view class="time">{{ item.v_addtime }}</view>
                </view>
            </view>
        </view>

        <emptys v-else></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        data() {
            return {
                list1: [
                    {
                        name: '一级',
                        badge: {
                            value: 0
                        }
                    },
                    {
                        name: '二级',
                        badge: {
                            value: 0
                        }
                    },
                    {
                        name: '三级',
                        badge: {
                            value: 0
                        }
                    }
                ],
                title: '',
                navTab: 1,
                staticUrl: this.staticUrl,
                toTop: false,
                brokerage_list: [],
                noData: false,

                commission: [],
                list1: [],
                list: '',
                msg: '一',

                state: '', // 我的团队
                level_name: [],
                page: 1,
                limit: 10,
                getMore: true,
                current: 0
            };
        },

        onShow() {
            // this.my_income_team();
            if (this.state == 1) {
                this.my_income_team();
            } else {
                this.my_income();
            }
        },

        onLoad(e) {
            console.log(e);
            let that = this;
            if (e.state == 1) {
                that.title = '我的团队';
                that.state = e.state;
            }
        },
        methods: {
            navclick(i, positions) {
                let that = this;
                if (positions == 0) {
                    that.msg = '一';
                }
                if (positions == 1) {
                    that.msg = '二';
                }
                if (positions == 2) {
                    that.msg = '三';
                }
                that.list = that.commission[positions];
                that.navTab = i;
            },

            tabClick(event) {
                this.current = event.index;
                this.$pop.pageScrollTo();
            },
            //  我的会员
            my_income() {
                let that = this;
                this.$showLoading('');
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/distribution_people',
                        data: {
                            page: this.page,
                            limit: this.limit
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        let level_name = res.level_name || [];
                        level_name.forEach((item) => {
                            item.badge = {};
                            item.badge.value = item.num;
                        });

                        this.list1 = level_name;
                        const result = res.data;
                        if (this.page == 1) return (this.commission = result);
                        result.forEach((item, index) => {
                            this.commission[index] = [...this.commission[index], ...item];
                        });
                    });
            },

            //  我的团队
            my_income_team() {
                let that = this;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/distribution_people_team'
                    })
                    .then((res) => {
                        if (res.errcode == '100') {
                            that.commission = res.data;
                            if (res.data[0]) {
                                that.list = res.data[0];
                            }
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.my_income();
        },
        computed: {
            ...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'bid', 'vid', 'totalHeight']),
            newTotalHeight() {
                // #ifdef MP-WEIXIN
                return this.totalHeight;
                // #endif
                // #ifdef H5
                return 0;
                // #endif
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: #f8f8f8;
    }
</style>
<style scoped lang="scss">
    .tabs {
        width: 100%;
        height: 84rpx;

        position: fixed;
        top: 0;
        left: 0;
        z-index: 888;
        background-color: #ffffff;
    }
    .right {
        float: right;
    }

    .page {
        .nav_top_box {
            width: 100%;
            height: 80upx;
            background: #ffffff;
            line-height: 80upx;
            font-size: 28upx;
            color: #333333;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
            box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);

            .navlists {
                width: 33%;
                display: inline-block;
                text-align: center;
                color: #999999;
                font-size: 24upx;

                &.navAction {
                    position: relative;
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #222222;
                }
            }

            .Advertising_article {
                width: 30upx;
                height: 6upx;
                position: absolute;
                bottom: 0;
                transition: left 0.2s;
                border-radius: 6upx;
                background-color: #222222;
                transform: translateX(106rpx);
            }
        }

        // 样式二
        .type2 {
            padding: 20rpx;
            padding-top: 100upx;

            .item {
                background-color: #ffffff;
                padding: 20rpx;
                border-radius: 8rpx;
                margin-bottom: 20rpx;

                .friHead {
                    border-radius: 50%;
                    height: 100rpx;
                    width: 100rpx;
                    margin-right: 20rpx;
                }

                .name {
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .id {
                    font-size: 28rpx;
                    color: #999999;
                }

                .time {
                    color: #999999;
                    margin-top: 4rpx;
                }

                .num-list {
                    flex-wrap: wrap;
                    padding: 20rpx;
                    padding-bottom: 0;
                    margin-top: 20rpx;
                    background-color: #f5f5f5;
                    border-radius: 8rpx;

                    .num {
                        width: 50%;
                        margin-bottom: 20rpx;
                        color: #333333;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }
</style>
